import {
  Card,
  Breadcrumb,
  Form,
  Button,
  Radio,
  Input,
  Upload,
  Space,
  Select,
  message
} from 'antd'
import { PlusOutlined } from '@ant-design/icons'
import { Link, useSearchParams } from 'react-router-dom'
import './index.scss'
import ReactQuill from 'react-quill'
import 'react-quill/dist/quill.snow.css'
import { useEffect, useState } from'react'
import {createArticleAPI} from '@/apis/article'
import { useChannel } from '@/hooks/useChannel'
import {getArticleId,updateArticleAPI} from '@/apis/article'


const { Option } = Select
const Publish = () => {
  // 获取频道列表
  const {channelList} = useChannel()

  // 设置图片类型
  const [imageType,setImageType] = useState('0')
  const onTypeChange = (value) => {  
    const res = value.target.value
    setImageType(res)
  }

  // 上传逻辑
  const [imageList,setImageList] = useState([])
  const onChange = (value) => {
    setImageList(value.fileList)
  }

  
// 提交表单
const onFinish = (values) => {
  console.log(values)
  // 检验封面类型imageType是否和实际的图片列表 ImageList数量相等
  if(imageList.length !== imageType) return message.warning('封面图片和类型不匹配')
  // 按照接口文档的格式,处理符合成接口文档的格式
  const {title,content,channel_id} = values // 解构数据
  const reqData = { 
    title, // str 简写
    content, // str
    cover:{ // obj
      type:imageType, // int
      images:imageList.map(item => {
        if (item.response) { // 将修改和新增上传的图片地址统一形式
          return item.response.data.url
        }else{
          return item.url
        }
      }) // 数组
    },
    channel_id // int
  }
  // 处理不同的接口 新增-新增接口, 编辑状态-更新接口
  if(articleId){
    // 更新接口
    updateArticleAPI({...reqData,id:articleId})
  }
  else{
    // 新增接口
    createArticleAPI(reqData)
  }
}

// 获取路由 id
const [searchParams] = useSearchParams()
const articleId = searchParams.get('id')
// 获取实例
const [form] = Form.useForm() // 绑定实例Form,通过setFieldsValue回显
useEffect(() => {
  // 没有id,直接返回
  if(!articleId) return

  // 调用获取文章详情的接口,这里如果直接打开页面会报错,传参跳转正常
  async function getArticleDetail(){
   const res = await getArticleId(articleId)
   const data = res.data.data
   const {cover} = data
   // 回显
   form.setFieldsValue(
    // 为什么封面无法回显
    // 数据结构的问题 set方法 => {type:3} {cover:{type:3}}
    {...data,
      type: cover.type
    }
   )
   // 回填图片列表
   setImageType(cover.type)
   // 回显上传的图片
    setImageList(cover.images.map(url => {
      return {url}
    }))
  }

  // 调用实例回显
  getArticleDetail()
},[articleId,form])




  return (
    <div className="publish">
      <Card
        title={
          <Breadcrumb items={[
            { title: <Link to={'/'}>首页</Link> },
            { title: `${articleId ? '修改' : '发布'}文章` },
          ]}
          />
        }
      >
        <Form
          labelCol={{ span: 4 }}
          wrapperCol={{ span: 16 }}
          initialValues={{ type: 0 }}
          onFinish={onFinish}
          form={form}
        >
          <Form.Item
            label="标题"
            name="title"
            rules={[{ required: true, message: '请输入文章标题' }]}
          >
            <Input placeholder="请输入文章标题" style={{ width: 400 }} />
          </Form.Item>
          <Form.Item
            label="频道"
            name="channel_id"
            rules={[{ required: true, message: '请选择文章频道' }]}
          >
            <Select placeholder="请选择文章频道" style={{ width: 400 }}>
              {/* value属性,用户选中后会自动收集起来,作为借口的提交字段 */}
              {channelList.map(item => <Option key={item.id} value={item.id}>{item.name}</Option>)}
            </Select>
          </Form.Item>
          {/* 上传封面 */}
          <Form.Item label="封面">
            <Form.Item name="type">
              <Radio.Group onChange={onTypeChange}>
                <Radio value={1}>单图</Radio>
                <Radio value={3}>三图</Radio>
                <Radio value={0}>无图</Radio>
              </Radio.Group>
            </Form.Item>
            {imageType > 0 && (<Upload
              listType="picture-card" // 样式
              showUploadList  //控制显示上传列表
              name='image'
              action={'http://geek.itheima.net/v1_0/upload'}
              onChange={onChange}
              maxCount={imageType}
              fileList={imageList}
            >
              <div style={{ marginTop: 8 }}>
                <PlusOutlined />
              </div>
            </Upload>)}
          </Form.Item>

          <Form.Item
            label="内容"
            name="content"
            rules={[{ required: true, message: '请输入文章内容' }]}>
            {/* 此处插入富文本编辑器 */}
            <ReactQuill
              className="publish-quill"
              theme="snow"
              placeholder="请输入文章内容"
            />

          </Form.Item>

          <Form.Item wrapperCol={{ offset: 4 }}>
            <Space>
              <Button size="large" type="primary" htmlType="submit">
                发布文章
              </Button>
            </Space>
          </Form.Item>
        </Form>
      </Card>
    </div>
  )
}

export default Publish